<template>
  <div class="aside-content">
    <div class="sign"><img src="../assets/images/sign.png" /></div>
    <div class="publish">
      <div class="publish-menu">
        <el-button>
          <i class="el-icon-document-add"></i> <span>首页</span
          ><i class="el-icon-arrow-down" style="width: 90px"></i
        ></el-button>
        <div class="publish-box">
          <ul>
            <router-link to="/videos"
              ><li>
                <i class="el-icon-camera-solid"></i>发布视频
              </li></router-link
            >
            <router-link to="">
              <li><i class="el-icon-picture"></i>发布图文</li></router-link
            >
          </ul>
        </div>
      </div>
    </div>
    <div class="aside-items">
      <el-menu
        router
        default-active="1"
        :unique-opened="true"
        class="el-menu-vertical-demo"
        background-color="#f2f2f4"
        text-color="#777880"
        active-text-color="#252632"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-menu-item index="/serve">
          <i class="iconfont icon-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <i class="iconfont icon-content"></i>
            <span>内容管理</span>
          </template>
          <el-menu-item index="/workManagement">
            <template
              ><i class="iconfont icon-works-creation"
                ><span>作品管理</span>
              </i></template
            >
          </el-menu-item>
        </el-submenu>
        <el-menu-item index="/order">
          <i class="el-icon-notebook-1" style="font-weight: 600"></i>
          <span slot="title">订单管理</span>
        </el-menu-item>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-connection" style="font-weight: 600"></i>
            <span>互动管理</span>
          </template>
          <el-menu-item index="/concernManagement"
            ><template
              ><i class="iconfont icon-attention-creation"
                ><span>关注管理</span>
              </i></template
            ></el-menu-item
          >
          <el-menu-item index="/fansManagement"
            ><template
              ><i class="iconfont icon-attention-fensi"
                ><span>粉丝管理</span>
              </i></template
            ></el-menu-item
          >
          <el-menu-item index="/commentManagement"
            ><template
              ><i class="iconfont icon-review"
                ><span>评论管理</span>
              </i></template
            ></el-menu-item
          >
          <el-menu-item index="/messageManagement"
            ><template
              ><i class="iconfont icon-message-manage"
                ><span>私信管理</span>
              </i></template
            ></el-menu-item
          >
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="iconfont icon-date"></i>
            <span>作品数据</span>
          </template>
          <el-menu-item index="/dataScreening"
            ><template
              ><i class="iconfont icon-data-browse"
                ><span>数据总览</span>
              </i></template
            ></el-menu-item
          >
          <el-menu-item index="/workData"
            ><template
              ><i class="iconfont icon-works-browse"
                ><span>作品数据</span>
              </i></template
            ></el-menu-item
          >
          <el-menu-item index="/weeklyReport"
            ><template
              ><i class="iconfont icon-week-creation"
                ><span>创作周报</span>
              </i></template
            ></el-menu-item
          >
        </el-submenu>
        <el-submenu index="6">
          <template slot="title">
            <i class="iconfont icon-help-center"></i>
            <span>帮助中心</span>
          </template>
          <el-menu-item index="5-1"
            ><template
              ><i class="iconfont icon-function-introduction"
                ><span>功能介绍</span>
              </i></template
            ></el-menu-item
          >
          <el-menu-item index="5-2"
            ><template
              ><i class="iconfont icon-contact-us"
                ><span>联系我们</span>
              </i></template
            ></el-menu-item
          >
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
    },
    handleClose(key, keyPath) {
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.sign {
  width: 185px;
  position: fixed;
  height: 70px;
  left: 0;
  top: 0;
  z-index: 999;
}
.sign img {
  width: 185px;
  height: 70px;
  background: #f2f2f4;
}
.publish {
  width: 100%;
  margin-top: 70px;
  position: relative;
  text-align: center;
}
.publish-box {
  width: 140px;
  height: 80px;
  border-radius: 4px;
  display: none;
  z-index: 999;
  position: absolute;
  left: 22px;
  top: 42px;
  background: #f8f8f8;
  box-shadow: 0px 2px 9px 4px #c7c7c7;
}
/* .publish .el-button:hover + .publish-box {
  display: block;
} */
.publish-menu {
  height: 42px;
  margin: auto;
  width: 140px;
}
.publish-menu:hover .publish-box {
  display: block;
}
.publish-box ul {
  flex-direction: column;
}
.publish-box ul li {
  height: 40px;
  /* align-items: center; */
  text-align: center;
  color: #727272;
  font-size: 14px;
  line-height: 40px;
}
.publish-box ul li:hover {
  color: #2c2c2c;
}
.publish-box ul li i {
  margin-right: 3px;
}
.publish .el-button {
  background: #fe375c;
  width: 140px;
  color: #fff;
  font-weight: 600;
}
.publish .el-button:hover {
  background: #d21b46;
  color: #fff;
}
.aside-items {
  overflow: hidden;
  width: 100%;
  margin-top: px;
}
.aside-items .el-submenu,
.aside-items .el-menu-item {
  list-style: none;
  margin: 0;
  font-size: 14px;
  padding-left: 0;
  font-weight: 600;
}
.aside-items .el-menu-item i,
.aside-items .el-submenu__title i {
  font-size: 18px;
  margin-right: 5px;
}
.aside-items .el-menu-item i span{
  font-size: 14px;
}
</style>
